<template>
  <div>
    <!-- <h1>用户登录</h1> -->
    <van-row>
      <van-col span="8"></van-col>
      <van-col span="8">
        <van-icon name="http://rul4y8e5f.hn-bkt.clouddn.com/17-%E7%99%BB%E5%BD%95.png" size="5rem"></van-icon>
      </van-col>
      <van-col span="8"></van-col>
    </van-row>
  
    <van-form @submit="onSubmit">
  <van-field
    v-model=" loginformDTO.userNumber"
    name="账号"
    label="账号"
    placeholder="账号"
    :rules="[{ required: true, message: '请填写账号' }]"
  />
  <van-field
    v-model=" loginformDTO.userPassword"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  <br/>
  <router-link to="/userRegister"> 没有账号？立即注册</router-link>
  </div>
 
</van-form>

  </div>
</template>

<script>
import UserAPI from '@/api/UserAPI'

export default {
name: 'UserLogin',
data() {
    return {
      loginformDTO: {
        userNumber: '',
         userPassword: '',
      },
      
    };
  },
  methods: {
    gotoMusic(){
      this.$router.push("/musicRecPage")
    },
    save2web(){

    },
    onSubmit(values) {
      console.log('submit', values);
      var result = UserAPI.UserLogin2(this.loginformDTO)
      // 获取响应结果 
      result.then((val)=>{
        console.log(val)
        if(val.success){
          console.log("登录成功！！！")
          // 将数据存入浏览器
          localStorage.setItem("userDTO",JSON.stringify(val.data))
          localStorage.setItem("token",val.data)
          localStorage.setItem("userId",val.data.userId)
          this.$bus.$emit("login",val.data.userId)
          this.gotoMusic()
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        //   Toast({
        //   message: val.errorMsg,
        //   position: 'bottom',
        // });
        }
            })
    },
  },

}
</script>

<style lang="less">

</style>